<template>
  <div>
      <h3>推荐</h3>
      <ul>
          <li v-for="(v,i) in arr" :key="i">
              <router-link to="/xiangqing">
                  <img :src="v.img" alt="">
                  <p>{{v.text}}</p>
                  <span>{{v.sprice}}</span>
              </router-link>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
data() {
    return {
        arr:[
        {
   img:"list/1.webp",
   text:"CAUDALIE欧缇丽臻美亮白精华液",
   sprice:"¥540.00"
        },
          {
   img:"list/2.webp",
   text:"LANCOME兰蔻肌底精华焕亮眼霜",
   sprice:"¥530.00"
        },
     {
   img:"list/3.webp",
   text:"Kiehl's科颜氏新集焕白均衡亮肤淡斑精华液50ML",
   sprice:"¥780.00"
        },  
        {
   img:"list/4.webp",
   text:"LANCOME黑金卡专享兰蔻肌底精华焕亮眼霜15ml",
   sprice:"¥780.00"
        },  
          {
   img:"list/5.webp",
   text:"LANCOME黑金卡专享兰蔻肌底精华焕亮眼霜15ml",
   sprice:"¥780.00"
        }, 
          {
   img:"list/6.webp",
   text:"CLINIQUE倩碧匀净淡斑多效精华露",
   sprice:"¥780.00"
        },   
          {
   img:"list/7.webp",
   text:"CAUDALIE欧缇丽修护滋养润唇膏",
   sprice:"¥60.00"
        },  
          {
   img:"list/8.webp",
   text:"L ANCOME兰蔻眼部肌底精华液",
   sprice:"¥680.00"
        },                      
        ]
    }
},
}
</script>

<style scoped>
div{
    width: 90%; 
    margin: 5% auto;
    
}
h3{
    margin-bottom: 0.1rem;
}
ul{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
li{
   width: 48%; 
   height: 2.5rem;
   border: 1px solid gainsboro;
   border-radius: 0.1rem;
     font-size: 0.14rem;
     margin-bottom: 0.15rem;
  
}
img{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.1rem;
    display: block;
    margin: auto;

}
p{
  
  margin: 0.2rem 0;
}
</style>